<template>
  <PageContainer title="个人资料">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <!-- 第一行: 登录名称 -->
      <el-form-item label="登录名称" prop="userName">
        <el-input
          v-model="form.userName"
          disabled
          style="width: 50%"
        ></el-input>
      </el-form-item>

      <!-- 第二行: 用户昵称 -->
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="form.nickName" style="width: 50%"></el-input>
      </el-form-item>

      <!-- 第三行: 用户邮箱 -->
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="form.email" style="width: 50%"></el-input>
      </el-form-item>

      <!-- 第四行: 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm" style="width: 50%"
          >提交修改</el-button
        >
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<script setup>
import { useUserStore } from '@/stores'
import { ref, reactive,computed } from 'vue'
import { ElMessage } from 'element-plus'
import { userUpdateInfoService,userGetInfoService2 } from '@/api/user'

// 表单数据模型
// const form = ref({
//   id: '',
//   user_prc: '',
//   username: '',
//   nickname: '',
//   email: ''
// })

// 表单引用
const formRef = ref(null)
// 获取用户信息
const form = computed(()=>{
 
  
  
  return useUserStore().user
})
// 验证规则
const rules = reactive({
  nickName: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change']
    }
  ]
})

// 提交表单
const submitForm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await userUpdateInfoService(form.value)
      ElMessage.success('提交成功')
      const { data } = await userGetInfoService2()
      useUserStore.setUser(data)
      // 这里可以添加你的提交逻辑
    } else {
      ElMessage.error('请检查表单填写')
      return false
    }
  })
}
</script>
